// 价格模拟服务器的数据

let data = [{
        "count": 4000,
        "price": 1200,
        "unitPrice": "0.3000"
    },
    {
        "count": 8000,
        "price": 2000,
        "unitPrice": "0.2500"
    },
    {
        "count": 40000,
        "price": 8000,
        "unitPrice": "0.2000"
    }
]
// 定义空字符串保存搭建的html代码
let empty = '';
let rightBtn = document.querySelector('.right-btn');

function renderDate() {
    data.forEach(function (v, i) {
        empty += `
        <li>
            <button class="${i == 0 ? 'active' : ''}" data-price="${v.price}" data-unit-price="${v.unitPrice}">${v.count}次</button>
        </li>
        `
    })
    rightBtn.innerHTML += empty;
    // console.log(empty);
}
renderDate()

// 点击次数按钮获取价格改变样式
let rightPrice = document.querySelector('.right-price')
rightBtn.addEventListener('click', function (e) {
    // 先干掉全部
    let but = document.querySelectorAll('.right-btn button')
    but.forEach(function (dom) {
        dom.classList.remove('active')
    })
    // 设置点击样式 改变下方的价格
    if (e.target.nodeName.toLowerCase() === 'button') {
        e.target.classList.add('active')
        rightPrice.innerHTML = `
        <span class="on">￥${e.target.dataset.price}</span>
        （约${e.target.dataset.unitPrice}元一次/次），仅限企业实名购买
        `
        // console.log(e.target.dataset.unitPrice);
    }
})
// a是选项卡的标签名  b是内容的标签名
function optionCord(a,b) {
    // 选项卡功能
let navLi = document.querySelectorAll(a)
let list = document.querySelectorAll(b)
// console.log(navLi, list);
// 设置一个保存上一次点击的下标
let index = 0;
navLi.forEach(function (dom,i) {
    dom.addEventListener('click', function () {
        // console.log(1);
        // 干掉上一个
        navLi[index].classList.remove('active');
        list[index].classList.remove('on');

        // 给当前增加激活样式
        dom.classList.add('active');
        list[i].classList.add('on');
        index = i;
    })
})
}
optionCord('.nav li','.list')